<template>
  <div id="paySuccess">
    <div class="topBox">
      <img
        src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/pay.png"
        alt=""
      />
      <h3>支付成功</h3>
      <span>恭喜您成为中石油权益会员</span>
      <div class="nowUse" @click="payWater">立即支付1元格桑泉抵用券</div>
    </div>

    <div class="back" @click="backIndexButton">回首页></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    
  },
  methods: {
    //   回首页
    backIndexButton() {
      this.$router.push({ name: "index" });
    },
    // 立即使用
    payWater(){
            window.localStorage.setItem('whatBuy', 'gsq')
      this.$router.push({
        name: "creatOrder",
        query: {
          goodsNo: window.localStorage.getItem('geSangQuanGoodsNo'),
          didPay: "noYet",
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.topBox {
  position: relative;
  width: 95%;
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/background/payokBg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  padding-top: 1rem;
  box-sizing: border-box;
  margin: 1rem auto;
  img {
    width: 30%;
  }
  h3 {
    font-size: 0.4rem;
    margin: 0.2rem 0 ;
    padding: 0;
  }
  span {
    font-size: 0.4rem;
    color: #999;
  }
  p {
    margin-top: 0.8rem;
    font-size: 0.35rem;
    .red {
      color: #c41e34;
      font-weight: 700;
    }
  }
}
.nowUse {
  width: 90%;
  margin: auto;
  padding: 0.3rem 0;
  box-sizing: border-box;
  border: 1px solid #c41e33;
  color: #c41e34;
  border-radius: 0.7rem;
  font-weight: 700;
  font-size: 0.4rem;
  margin-top: 1rem;
  text-align: center;
}

.back {
  text-align: center;
  color: #ccc;
  margin-top: .4rem;
}
</style>